

import React, { useState, useEffect } from 'react'
import { getStoreName } from '@api/profile';
import { getParamsString } from '@/utils'
import { Modal, Toast } from 'antd-mobile';
import { HeaderAvatar } from '../../style'
import { useStore } from 'react-redux'
import { updateavatarAction } from '@store/actionCreators'
import { updateAvatar } from '@api/profile'

const avatarList = [
  { src: 'https://res.lexiangpingou.cn/images/826/2020/10/sfsS3P2SopR32o5SSOkhp23KkSh2YK.png'},
  { src: 'https://res.lexiangpingou.cn/images/826/2020/10/Jrw73uRJjszsJJ3ujjZJVAjWvBVrbF.png'},
  { src: 'https://res.lexiangpingou.cn/images/826/2020/10/PVsaL8u8a8eSGqStstUvUuXGLlUXXc.png'},
  { src: 'https://res.lexiangpingou.cn/images/826/2020/10/hzs1dwdB4j1Do8W464ziOd6wqCi88o.png'},
]

const Avatar = (props) => {

  const [avatar, setAvatar] = useState( avatarList[0].src )
  const [avatarIndex, setAvatarIndex] = useState(0)


  return (
    <>
      <Modal
        visible={props.modal}
        maskClosable={true}
        transparent
        popup={true}
        onClose={e => { props.modalSwitch() }}
        animationType='slide-up'
        title="选择头像"
        style={{
          backgroundColor: 'white',
          border: '0px'
        }}
      >
        <HeaderAvatar>
          <div className="avatar-content flex-row">
          {/*  x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); */}
            {
              avatarList.map( (item, key) => {
                return(
                  <img key={ key + item.src } src={ item.src } onClick={e => { selectAvatar( item.src, key )  }} alt=""
                    style={ key === avatarIndex ? {  borderRadius: '50%', boxShadow: '3px 3px 10px 1px #ff762e'} : {} }
                  />
                )
              })
            }
          </div>

          <button className="save-avatar" onClick={ e => { changeAvatar() } }>
            保存修改
          </button>

        </HeaderAvatar>


      </Modal>
    </>
  )

  function selectAvatar(src, key){
    setAvatarIndex(key)
    setAvatar(src)
  }

  async function changeAvatar() {
    props.changeAvatar( avatar )
    let res = await  updateAvatar( avatar )
    console.log(res , '保存头像')
  }

}

const Header = (props) => {


  const store = useStore();

  const [storeName, setstoreName] = useState('')
  const [modal, setmodal] = useState(false)
  const [avatar, setavatar] = useState( store.getState().avatar )

  const isApplet = store.getState().appConfig.isApplet

  useEffect(() => {
    getStoreName().then(res => {
      setstoreName(res)
    }) 

    return () => {

    }
  }, [])

  return (
    <div className="profile-header flex-row">
      <div className="header-left flex-row">
        <img className="avatar" onClick={e => { modalSwitch() }} alt="" src={avatar}></img>
        <div className="header-info">
          <div className="name">
            {storeName}
          </div>
          <div className="mobile">
            {getParamsString('username')}
            <span
              style={{
                color: '#ff762e',
                marginLeft: '.23rem'
              }}
              onClick={e => { window.goPage('/pages/home-page/main') }}
            > 退出商城 </span>
          </div>
        </div>
      </div>

      <div className="header-kefu" onClick={e => { isApplet ? window.goService() : Toast.info('当前环境不是小程序', 1) }}>
        <img src="https://res.lexiangpingou.cn/images/826/2020/09/wu11GRRGng0I1vgMI0g6n1gOv6s1UM.png" alt="" />
      </div>

      <Avatar modal={modal} changeAvatar={e => { changeAvatar(e) }} modalSwitch={e => { modalSwitch() }} />
    </div>
  )

  function changeAvatar(avatar) {
    store.dispatch( updateavatarAction(avatar) )
    setavatar(avatar)
    modalSwitch()
  }

  function modalSwitch() {
    setmodal(!modal)
  }
}

export default Header